<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<form action="" @submit.prevent="demo">
				账号：<input type="text" v-model="userInfo.account"><br>
				密码：<input type="password" v-model="userInfo.password"><br>
				性别：男<input type="radio" name="sex" value="male" v-model="userInfo.sex">女<input type="radio" name="sex" value="female" v-model="userInfo.sex"><br>
				爱好：抽烟<input type="checkbox" v-model="userInfo.hobby" value="smoke">喝酒<input type="checkbox" v-model="userInfo.hobby" value="drink">烫头<input type="checkbox" v-model="userInfo.hobby" value="head"><br>
				所属校区：<select name="" id="" v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
				</select><br>
				其他信息：<textarea rows="10" cols="30" v-model="userInfo.other"></textarea><br>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a><br>
				<button >提交</button>
			</form>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#root',
				data: {
					userInfo:{
						account:'',
						password:'',
						sex:'',
						hobby:[],
						city:'',
						other:'',
						agree:''
					}
				},
				methods:{
					demo(){
						console.log(JSON.stringify(this.userInfo));
					}
				}
			})
		</script>
	</body>
</html>
